<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="order-info" @click="goDetail">
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__num">订单号：56468764354</div>
            <div class="order-info__item__el order-info__item__status order-info__item__status__wait">待配送</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__name">大桶水5L</div>
            <div class="order-info__item__el">x1</div>
            <div class="order-info__item__el order-info__item__price">￥16</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__date">2018-10-01 15:00:00</div>
            <div class="order-info__item__el order-info__item__total">合计：￥15</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__paytit">支付方式</div>
            <div class="order-info__item__el order-info__item__payway order-info__item__payway_online">线上支付</div>
          </div>
        </div>
        <div class="order-info" @click="goDetail">
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__num">订单号：56468764354</div>
            <div class="order-info__item__el order-info__item__status order-info__item__status__wait">待配送</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__name">大桶水5L</div>
            <div class="order-info__item__el">x1</div>
            <div class="order-info__item__el order-info__item__price">￥16</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__date">2018-10-01 15:00:00</div>
            <div class="order-info__item__el order-info__item__total">合计：￥15</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__paytit">支付方式</div>
            <div class="order-info__item__el order-info__item__payway order-info__item__payway_offline">线下支付</div>
          </div>
        </div>
        <div class="order-info order-info__finished">
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__num">订单号：56468764354</div>
            <div class="order-info__item__el order-info__item__status">已完成</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__name">大桶水5L</div>
            <div class="order-info__item__el">x1</div>
            <div class="order-info__item__el order-info__item__price">￥16</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__date">大桶水5L</div>
            <div class="order-info__item__el order-info__item__total">合计：￥15</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__paytit">支付方式</div>
            <div class="order-info__item__el order-info__item__payway">线上支付</div>
          </div>
        </div>
        <div class="order-info order-info__finished" v-for="n in num">
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__num">订单号：56468764354</div>
            <div class="order-info__item__el order-info__item__status">已完成</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__name">大桶水5L</div>
            <div class="order-info__item__el">x1</div>
            <div class="order-info__item__el order-info__item__price">￥16</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__date">大桶水5L</div>
            <div class="order-info__item__el order-info__item__total">合计：￥15</div>
          </div>
          <div class="order-info__item">
            <div class="order-info__item__el order-info__item__paytit">支付方式</div>
            <div class="order-info__item__el order-info__item__payway">线上支付</div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      finished: false,
      loading: false,
      num: 4
    };
  },
  methods: {
    goDetail() {
      this.$router.push({
        name: 'orderDetail'
      });
    },
    onRefresh() {
      this.num = 4;
      this.finished = false;
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
    },
    onLoad() {
      setTimeout(() => {
        this.num += 2;
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.num >= 10) {
          this.finished = true;
        }
      }, 500);
    }
  }
};
</script>

<style lang="less" scoped>
@import '../../styles/variable.less';

.order-info {
  padding: 5px 10px;
  color: #333333;
  background-color: #fff;
  margin-bottom: 10px;
}

.order-info.order-info__finished {
  color: #999999;
}

.order-info__item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
}

.order-info__item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

.order-info__item__status__wait {
  color: #32b750;
}

.order-info__item__num {
  color: @col-the;
}

.order-info__item__name {
  flex: 0 0 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
